一份Vue笔记,一个少年故事
本篇文章主要记录 4ye 之前学
vue
的一些笔记,哈哈 非常青涩~主要介绍了 入门
vue
的一些知识点,如Babel
,css
预处理器 ,ES6
,Eslint
,vuex
等等~
故事发生在一个卷卷卷的年代,一个初出茅庐的Java
开发者涉世未深,对前端没有怀着敬畏之心,对上级安排的前端项目嗤之以鼻,欣然接下。
心高气傲的他丝毫没有意识到问题的严重性,甚至觉得做这个前端项目也是分分钟的事情,心里默念着“不就是写写 JS
,调调 CSS
吗,这有啥难的 , 分分钟后,老子又可以摸鱼~”
于是乎,故事就这么开始了~
白发少年和我在夕阳下慢悠悠地说着这段故事
”白天…… 夜里……“
正当我听得入神时,眼前的白发少年却突然停了下来,抬头望着即将消失的夕阳道,说:”到点了,我要回家了“,我起身想多留他一会,却听他婉拒到,”好久没和夕阳一起下班了“
这一刻,很多话被我咽回去了
回来后整理了和少年的对话,发现就这么两句:
白天,他如临大敌,火急火燎,却堪堪画了个雏形。
夜里,他辗转反侧,心力憔悴,只因三个字:”改UI“
相同的时间,相同的地点,我又断断续续地约着少年,继续聊聊他的故事。
终于,在第n次后,故事迎来了新的高潮
少年目光如炬,缓缓地道,他成了守夜人 。
深夜是他的另一个战场,他的工位上光亮依旧,在这偌大的公司里显得那么的耀眼!
可就是这么安宁的场景,却传来与那份寂静格格不入的阵阵键声。
键声时而急促,时而缓慢,在这无边的寂静中宣泄着他那焦急无助的心情。
少年抬头45度角仰望天空
本以为少年想感慨”天不生我尤雨溪,我大前端万古如长夜“,
却听他说 ”若此后公司夜里没有光,我便是唯一的光“
什么光?工位的光?
少年沉默一阵后,袒露到,在无数个夜深人静里,他悔不当初...
再看着少年眼里流露出的 五彩斑斓的黑和那流光溢彩的白 后,我也陷入了沉思
至于中间具体发生了什么,就不得而知了,此时此刻恰如彼时彼刻,我们先从眼前这份笔记入手叭~
这份笔记也有一年了,哈哈
因为当时项目需要,领导让我负责。。去用vue
搭建一个前端项目出来。
(心里活动:纳尼(ÒωÓױ)!这是部门里第一个用vue
搭建的前端项目啊!------》算了,好像vue
挺好玩的 去试试)
由于接触的知识点特别多 对我这个前端萌新来说是很有挑战的。。
学习历程
在搭建项目之前
我先去 vue
官网了解了一下vue
的简单使用,如vue
的模板语法 在一个普通的HTML
页面中引入并使用它(这会还觉得确实容易上手。。)接着就去百度看看vue相关的项目用到了那些技术(vue全家桶:vue-cli + vue2.0 + vuex + vue-router + axios + element-ui )一下子觉得信息量爆炸。。(X_X) 后面在同事的推荐下去看了这个 vue-element-admin 开源项目,被虐得体无完肤, 又简单了解到 ESlint,Webpack,Babel,less,Mock,ES6语法,Commit规范和 vscode 的各种强力插件如 Vetur 等, 幸运的是经过一周多的学习对这些东西也比较熟悉了。。 然后发现vue3.0Beata版出来了,,(oT-T)尸
下面进入正题!
在了解了vue
的基础使用后,我决定尝试着用vue cli
搭建一个项目出来。
Vue Cli
官方文档参考[1]
介绍
Vue CLI
是一个基于Vue.js
进行快速开发的完整系统 特点:
通过 @vue/cli
搭建交互式的项目脚手架。一个丰富的官方插件集合,集成了前端生态中最好的工具。
安装
npm install -g @vue/cli
# Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
# OR
yarn global add @vue/cli
使用
vue create vue-test
选择manual
的话会出现下图,需要你手动去添加需要的功能
下面将逐一简单说下图中的插件
Babel
官方文档参考[2]
介绍
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中
// Babel 输入:ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);
// Babel 输出:ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
return n + 1;
});
Babel
是 Vue-Cli
脚手架中的默认选项,使用了之后就会在项目目录中生成一个 babel.config.js 的默认文件,可以帮我们预设插件( vue-element-admin
项目中该文件也是默认生成的,于是我也没有改动这个文件)
Typescript
菜鸟教程 Typescript文档[3]
介绍
TypeScript
是JavaScript
的一个超集,支持ECMAScript6
标准。TypeScript
设计目标是开发大型应用,它可以编译成纯JavaScript
,编译出来的 JavaScript 可以运行在任何浏览器上。
博主在项目中并没有使用到这个 Typescript
,但是有在 vue
中使用到 ES6
的一些语法,这里推荐下 阮一峰大神 的 ES6入门教程[4]
PWA (Progressive Web App)
Mozilla 开发者社区(MDN) PWA文档[5]
介绍
PWA
(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。
个人理解这应该是类似小程序,快应用等不用安装到手机上就可以使用的程序
Vue Router
官方文档[6]
简单来说它是个前端路由,控制页面的跳转
这部分的知识点在了解了 vue
的组件之后会更好理解
(当时的感觉是,卧槽,前端还有自己的路由的😂)
Vuex
官方文档[7]
Vuex
是一个专为Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
应用场景
多个视图组件,包括父子组件,兄弟组件之间的状态共享 不同视图组件的行为需要变更同一个状态
CSS Pre-processors
可以选择 Sass
,Scss
,Less
,Stylus
这四种 css
预处理器,博主使用的博客主题里用到的是stylus
,所以对这个stylus
是比较熟悉的,项目中也是使用它。
Linter / Formatter
选择后会在文件夹中生成 .eslintrc.js 代码规范文件。可以参考 饿了么团队Eslint[8]
Unit Testing 单元测试
Jest[9] 是 facebook 推出的一款测试框架,还没实践。。
E2E Testing 端对端测试
Nightwatch[10] 一个自动化测试方案,还没实践。。
其他工具的使用
如 axios
,element-ui
,v-charts
,Webpack
,Mock
和EasyMock
等
axios
中文文档[11]axios
对vue
框架进行整合 vue-axios[12]它是一个非常好用的http
客户端!Axios
是一个基于promise
的 HTTP 库,可以用在浏览器和node.js
中。promise
是异步编程的一种解决方案,是ES6
语法中的一员.element-ui
官方文档[13]和layui
这些前端框架一样,可以提高开发效率!网站快速成型工具
Element
,一套为开发者、设计师和产品经理准备的基于Vue 2.0
的桌面端组件库配合
vue
使用的图表组件 v-charts[14]在使用
echarts
生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts
的出现正是为了解决这个痛点。基于Vue2.0
和echarts
封装的v-charts
图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。Webpack
官方文档[15]webpack
是一个现代JavaScript
应用程序的静态模块打包器(module bundler)。当webpack
处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。其中
__dirname
是Node.js
中的全局变量,表示当前文件所在的目录。Webpack
本身只能处理JavaScript
模块,如果要处理其他类型的文件,就需要使用loader
进行转换,所以在使用stylus
时也会装相应的loader
,在vue
中使用这个svg图片也需要相应的配置,这些配置需要在vue.config.js中配置(这个文件需要手动创建),跨域的问题也要在这里进行配置。mock
官方文档[16]生成随机数据,拦截
Ajax
请求正如官网所说的,它是一个模拟数据生成器,拦截
ajax
请求意味着你在浏览器的调试窗口是看不到它发出去的请求,所以这个对我们模拟跨域问题不大友好,不过现在又有了更方便的 EasyMockEasyMock文档[17]
github地址[18]
(注意版本!)
学习过程中这个API
和文档密不可分,如Vue.js文档[19] 和API[20] 可以先大概浏览下,有问题的时候可以针对性地查查api
,找找解决办法
以上就是博主最近当时学 vue
了解到的一些知识点,希望对你有所帮助!😝
最后
如果你觉得本篇文章还不错的话,那拜托再点点赞支持一下这个 这个有着五彩斑斓的黑和流光溢彩的白的少年好吗😝
让我们开始这一场意外的相遇吧!~
欢迎留言!!谢谢支持!ヾ(≧▽≦*)o 冲冲冲!!
嘿嘿,我是4ye 咱们下期再见!╰(°▽°)╯
站了5个小时换来的书单
曾经拥有和不曾拥有哪个更遗憾?
万字长文,带你快速上手这些池化技术!
你什么时候觉得自己长大啦
参考资料
官方文档参考: https://cli.vuejs.org/zh/guide/
[2]官方文档参考: https://www.babeljs.cn/docs/
[3]Typescript文档: https://www.runoob.com/typescript/ts-tutorial.html
[4]ES6入门教程: https://es6.ruanyifeng.com/
[5]PWA文档: https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
[6]官方文档: https://router.vuejs.org/zh/
[7]官方文档: https://vuex.vuejs.org/zh/
[8]饿了么团队Eslint: https://www.npmjs.com/package/eslint-config-elemefe
[9]Jest: https://www.npmjs.com/package/jest
[10]Nightwatch: https://nightwatchjs.org
[11]中文文档: http://www.axios-js.com/zh-cn/docs/
[12]vue-axios: http://www.axios-js.com/zh-cn/docs/vue-axios.html
[13]官方文档: https://element.eleme.cn/#/zh-CN/component/installation
[14]v-charts: https://v-charts.js.org/#/
[15]官方文档: https://www.webpackjs.com/
[16]官方文档: https://github.com/nuysoft/Mock/wiki
[17]EasyMock文档: https://easy-mock.com/docs
[18]github地址: https://github.com/easy-mock/easy-mock
[19]Vue.js文档: https://cn.vuejs.org/v2/guide/
[20]API: https://cn.vuejs.org/v2/api/